<template>
    <div class="page-container">
        <a-form-model :model="search" style="margin: 25px 0 25px 25px;" layout="inline">
            <a-form-model-item label="路径">
                <a-select
                    show-search
                    placeholder="按路径搜索"
                    option-filter-prop="children"
                    style="width: 200px"
                    filter-option
                    v-model="search.path"
                    allowClear
                >
                    <a-select-option
                        v-for="(v, k) in options.path"
                        :key="k"
                        :value="v"
                    >{{v}}</a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="路由名">
                <a-select
                    show-search
                    placeholder="按路由名搜索"
                    option-filter-prop="children"
                    style="width: 200px"
                    filter-option
                    v-model="search.route"
                    allowClear
                >
                    <a-select-option
                        v-for="(v, k) in options.route"
                        :key="k"
                        :value="v"
                    >{{v}}</a-select-option>
                </a-select>
            </a-form-model-item>
            
            <a-form-model-item>
                <a-dropdown placement="bottomCenter" :disabled="deleteLogLoading">
                    <a-button>删除访问日志...</a-button>
                    <a-menu slot="overlay">
                        <a-menu-item v-for="(v, k) in deleteLogOptions" :key="k" @click="clearLog(v.value, v.label)">
                            <span>{{v.label}}</span>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </a-form-model-item>

            <a-form-model-item>
                <a-button type="primary" icon="search" @click="getVisitLog">搜索</a-button>
            </a-form-model-item>
        </a-form-model>
        <a-table
            :columns="tableColumns"
            :data-source="tableData"
            :rowKey="(record,index) => index"
            :pagination="false"
            :locale="{emptyText: '暂无记录'}"
        >
            <template slot="_url" slot-scope="text, item, index">
                {{item.url}} <hr> {{item.full_url}}
            </template>
        </a-table>
        <a-pagination v-model="page" :total="count" :pageSize.sync="limit" show-less-items @change="getVisitLog" :item-render="itemRender" style="margin-top: 20px;"/>
    </div>
</template>
<script>
import { getVisitLogOptions, getVisitLog, clearVisitLog } from '../../../api/setting'
export default {
    name: 'NavSetting',
    data() {return {
        search: {
            path: undefined,
            route: undefined
        },
        tableColumns: [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                width: 80
            },
            {
                title: '路由名',
                dataIndex: 'route',
                key: 'route',
                width: 160
            },
            {
                title: '路径',
                dataIndex: 'path',
                key: 'path',
                width: 200
            },
            {
                title: 'url',
                key: 'url',
                width: 320,
                scopedSlots: { customRender: '_url' },
            },
            {
                title: 'ip',
                dataIndex: 'ip',
                key: 'ip',
                width: 160
            },
            {
                title: '时间',
                dataIndex: 'create_time',
                key: 'create_time',
                width: 160
            }
        ],
        tableData: [],
        limit: 50,
        count: 0,
        page: 1,
        options: {},
        deleteLogOptions: [
            {
                label: '今天',
                value: 'day'
            },
            {
                label: '本月',
                value: 'month'
            },
            {
                label: '今年',
                value: 'year'
            },
            {
                label: '全部',
                value: 'all'
            }
        ],
        deleteLogLoading: false
    }},
    mounted() {
        this.getVisitLogOptions()
    },
    methods: {
        clearLog(range, rangeZh) {
            this.$confirm({
                title: `确认删除`,
                content: `是否确定要删除${rangeZh}的访问日志？`,
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.deleteLogLoading = true
                    clearVisitLog({range: range}).then(res => {
                        this.deleteLogLoading = false
                        this.$message.success('删除成功')
                        this.getVisitLogOptions()
                    }).catch(e => {
                        this.deleteLogLoading = false
                        console.log(e)
                        this.$message.error('删除失败')
                    })
                },
                onCancel: () => {}
            })
        },
        itemRender(current, type, originalElement) {
            if (type === 'prev') {
                return '';
            } else if (type === 'next') {
                return '';
            }
            return originalElement;
        },
        getVisitLogOptions() {
            getVisitLogOptions({}).then(res => {
                this.options = res.data
                this.getVisitLog()
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '未获取到数据')
            })
        },
        getVisitLog() {
            getVisitLog({
                limit: this.limit,
                page: this.page
            }).then(res => {
                this.tableData = res.data.data
                this.count = res.data.count
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '未获取到数据')
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    
</style>
